<!doctype html>
<html>
<head>
<g:javascript library="jquery" />
<r:layoutResources />
<title>Editing Books</title>

</head>
<body>

	<div id="body">
		<h1>View, Edit And add Books</h1>		
		<g:remoteLink action="randomQuote" update="bookInfo">
		Display Random Book from Database
		</g:remoteLink><br />
		
		<div id="bookInfo">
			<g:form name="submitForm" action="submitBook">
				Author (required): <input type="text" name="bookAuthor" />
				<br />
				Title (required): <input type="text" name="bookTitle" />
				<br />
				ISBN: <input type="text" name="isbn" />
				<br />
				Language: <input type="text" name="language" />
				<br />
				Description
				<br />
				<textarea name="description" rows="5" cols="25">
				</textarea>
				<br />
				Minimum grade level:
				<select name="minGradeLevel">
  				     <option value="0">0</option>
 					 <option value="1">1</option>
 				     <option value="2">2</option>
 					 <option value="3">3</option>
 					 <option value="4">4</option>
 					 <option value="5">5</option>
 					 <option value="6">6</option>
				</select>
				<br />
				Maximum grade level:
				<select name="maxGradeLevel">
  				     <option value="0">0</option>
 					 <option value="1">1</option>
 				     <option value="2">2</option>
 					 <option value="3">3</option>
 					 <option value="4">4</option>
 					 <option value="5">5</option>
 					 <option value="6">6</option>
				</select>
				<br />
				Genre
				<br />
				<select name="genre">
  				     <option value="General Leisure Reading">General Leisure Reading</option>
 					 <option value="Reading skills">Reading skills</option>
 				     <option value="Math skills">Math skills</option>
 					 <option value="Health">Health</option>
 					 <option value="Science">Science</option>
				</select>
				<br />
				<input type="submit" value="Submit Book" onClick="document.submitform.action='submitBook';" /><button type="button" id="clearForm">Clear</button>
				<input type="submit" value="Delete Book" onClick="document.submitform.action='deleteBook';" />
			</g:form>
		</div>

		<div id="booklist">
			<h2>Click book for more information:</h2>
			<ul>
				<g:each var="c" in="${bookList.sort { it.getTitle() } }">
					<li class="book"><g:remoteLink action="updateView"
							update="bookInfo"
							params="[bookAuthor:c.getAuthor(),bookTitle:c.getTitle()]">
							${c.getTitle()}
						</g:remoteLink></li>
				</g:each>
			</ul>
		</div>
		
	</div>
	<script>
	jQuery(function() { 
		jQuery("#body").delegate("#clearForm", "click", function() {
		jQuery("input[type!=submit],textarea,select").val(function() {return "";});
		}); 
		});
	</script>
</body>
</html>
